<template>
<!--  维护表单配置-->
  <div class="permission">
    <div class="desc">
      <div class="left">
        <ep-title :title="this.title"></ep-title>
        <ep-count
            :size="size"
            style="margin-left: 15px"
            text="数据量"
            :count="this.dataCount"
            unit="条"
        ></ep-count>
        <ep-time
            :size="size"
            style="margin-left: 15px"
            text="上次更新时间："
            :timer="this.lastUpdateTime"
        ></ep-time>
      </div>
      <div>
        <ep-button
            :size="size"
            style="margin-left: 15px"
            icon="add.svg"
            @click="
            () => {
              this.openSave();
            }
          "
        >新增</ep-button
        >
        <ep-button
            :size="size"
            style="margin-left: 15px"
            type="danger"
            icon="del.svg"
            @click="
            () => {
              this.deleteFormMaint();
            }
          "
        >删除</ep-button
        >
      </div>
    </div>

    <div style="margin-top: 10px"></div>

    <a-modal
        :title="aModalTitle"
        centered
        style="top: 20px"
        width="65%"
        destroyOnClose
        v-model="allotVisible"
        cancelText="关闭"
        okText="保存"
        @ok="formMaintHandleOk"
        @cancel="formMaintHandleCancel"
    >

      <form-maint-config-form ref="formMaintConfigForm"/>
    </a-modal>

    <div class="ep-table">
      <zh-table
          type="default"
          ref="tableList"
          rowId="roleId"
          :url = "tableUrl"
          height="auto"
          :columns="tableColumn"
      >
        <template #filter="{ $panel, column }">
          <input
              type="type"
              v-for="(option, index) in column.filters"
              :key="index"
              v-model="option.data"
              @input="$panel.changeOption($event, true, option)"
          />
        </template>
        <template #operate="{ row }">
          <div class="alert-message">
            <i class="fa fa-exclamation-circle alert-message-icon"></i>
            <span class="alert-message-content">
              <ep-button size="small" type="rank" @click="openEdit(row)"
              >编辑</ep-button
              >
            </span>
          </div>
        </template>
      </zh-table>
    </div>
  </div>
</template>

<script>
import modal from "ant-design-vue/es/modal";
const SHOW_PARENT = TreeSelect.SHOW_PARENT;
import {
  formMaintForDelete,
  formMaintForSave, formMaintForUpdate,
  getFormMaintList, getOrgList,
} from "@/services/system/whdngxlApi";
import { getBatchDict } from "@/services/system/api";
import PatrolPsAllot from "@/pages/system/form/PatrolPsAllot";
import { TreeSelect } from "ant-design-vue";
import EpButton from "@/components/assembly/button";
import ZhTable from "@/components/zh-table/ZhTable";
import ColumnManage from "@/components/assembly/columnManage";
import UnmovableRelics from "@/pages/whdngxl/TasksCheckManage/UnmovableRelics";
import {mapGetters} from "vuex";
import formMaintConfigForm from "@/pages/whdn/formMaintenance/form/formMaintConfigForm";
export default {
  name: "formMaintenanceConfig",
  components: {
    formMaintConfigForm,
    ColumnManage,
    EpButton,
    PatrolPsAllot,
    ZhTable,
  },
  computed: {
    ...mapGetters(['size']),
  },
  data() {
    return {
      dictData: {
        c0303: [],
        b0104: [],
      },
      filtersData: {},
      labelCol: {
        xs: { span: 24 },
        sm: { span: 8 },
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 16 },
      },
      // 分页参数
      tablePage: {
        total: 0,
        currentPage: 1,
        pageNum: 1,
        pageSize: 200,
      },
      tableUrl: getFormMaintList,
      tableColumn: [
        { type: "checkbox", width: 50, fixed: "left", visible: true },
        {
          type: "seq",
          width: 80,
          fixed: "left",
          align: "center",
          title: "序号",
          visible: true,
        },
        {
          field: "orgName",
          title: "所属区划",
          align: "center",
          width: 150,
          visible: true,
        },
        {
          field: "b0402Name",
          title: "表单名称",
          align: "center",
          width: 200,
          visible: true,
        },
        {
          field: "b0403Name",
          title: "维护周期",
          align: "center",
          width: 150,
          visible: true,
        },
        {
          field: "fullName",
          title: "操作人员",
          align: "center",
          width: 200,
          visible: true,
        },
        {
          field: "updateTime",
          title: "操作时间",
          align: "center",
          width: 250,
          visible: true,
        },
        {
          field: "operate",
          title: "操作",
          fixed: "right",
          align: "center",
          slots: {
            // 使用插槽模板渲染
            default: "operate",
          },
          visible: true,
        },
      ],
      rules: {},
      visible: false,
      allotVisible: false,
      //表头
      toolbarConfig: {
        custom: true,
        slots: {},
      },
      queryInfo: {
        c0303: "",
        b0102: "",
        manageAreas: undefined,
      },
      advanced: false,
      title:'维护表单配置',
      dataCount: "0", //数据量
      lastUpdateTime: "", //上次更新时间
      selectedRowKeys: [] /*table选中keys*/,
      selectionRows: [] /*table选中records*/,
      row: {},
      SHOW_PARENT,
      fieldVisible: false,
      columns: [],
      aModalTitle: ''
    };
  },
  mounted() {},
  created() {
    // 数据初始化
    this.$nextTick(() => {
      this.init();
    });
  },
  methods: {
    init() {
      this.listQuery();
    },
    openSave(){
      this.aModalTitle = '维护表单配置>新增'
      this.allotVisible = true
    },
    openEdit(row){
      this.aModalTitle = '维护表单配置>编辑'
      this.allotVisible = true
      this.$nextTick(() => {
        this.$refs.formMaintConfigForm.initData(row);
      });
    },
    formMaintHandleOk() {
      const formInfo = this.$refs.formMaintConfigForm.getData()
      if(formInfo){
        if(formInfo.b0401){
          this.$http.post(formMaintForUpdate, formInfo).then((res) => {
            this.$message.success("维护表单编辑成功！");
            this.formMaintHandleCancel()
            this.listQuery()
          })
        }else {
          this.$http.post(formMaintForSave, formInfo).then((res) => {
            this.$message.success("维护表单新增成功！");
            this.formMaintHandleCancel()
            this.listQuery()
          })
        }
      }
    },
    formMaintHandleCancel() {
      this.allotVisible = false;
    },
    listQuery() {
      //手动清空用户的选择
      this.$refs.tableList.clearCheckboxRow();
      //手动清空用户保留选中的行数据
      this.$refs.tableList.clearCheckboxReserve();
      //删除所选中的数据
      this.$refs.tableList.removeCheckboxRow();
      this.selectionRows = [];
      this.selectedRowKeys = [];
      this.$refs.tableList.isAllChecked = false;
      this.row = {};
      this.$refs.tableList.query(this.queryInfo).then((data)=>{
        this.dataCount = data.tableData.length
        this.lastUpdateTime = data.tableData[0].updateTime
      })
    },
    //获取勾选的数据
    getRecords() {
      if (this.$refs.tableList.isAllChecked) {
        this.selectionRows=this.$refs.tableList.getCheckboxRecords()
      } else {
        this.selectionRows = this.$refs.tableList.getAllCheckboxRecords();
      }
      if (this.selectionRows.length === 0) {
        modal.warn({ title: "提示", content: "请先进行勾选再操作" });
        return null;
      }
      return this.selectionRows
    },
    deleteFormMaint(){
      const records = this.getRecords()
      if(records && records.length >　0){
        this.$http.post(formMaintForDelete,{b0401List: records.map((item)=>{
            return item.b0401
          })}).then((res) => {
          this.$message.success("删除成功");
          this.listQuery()
        });
      }
    }
  },
};
</script>

<style lang="less" scoped>
.permission {
  //padding: 15px 20px 0;
  height: 100%;

  .desc,
  .operate {
    display: flex;
    align-items: center;
    justify-content: space-between;
    color: #fff;

    > div {
      flex: 0 0 auto;
      display: flex;
      align-items: center;
    }
  }

  .desc {
    margin-bottom: 20px;
  }

  .operate {
    margin-bottom: 15px;
    .field {
      flex: 0 0 auto;
      position: relative;
      margin-left: 15px;
      .field-box {
        position: absolute;
        top: 40px;
        left: 0;
        right: -40px;
        z-index: 99;
        border: 1px solid #2175a9;
        background: #002a44;
        border-radius: 5px;
        ul {
          padding: 10px;
          li {
            padding: 1px 0;
          }
        }
        .btn {
          display: flex;
          align-items: center;
          justify-content: space-between;
          padding: 5px;
          border-top: 1px solid #2175a9;
          color: #fff;
          p {
            flex: 1;
            text-align: center;
            cursor: pointer;
            &:hover {
              color: #49bbeb;
            }
          }
        }
      }
    }
  }
  .ep-table {
    height: calc(100% - 130px);
  }
}
</style>
